<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    @cancel="handleCancel"
    @ok="handleCancel"
    :width="800"
    centered
    title="统计图表"
  ><echartsView :loading="loading" :options="options"></echartsView
  ></a-modal>
</template>

<script>
import { echartsView } from '@/components'
export default {
  components: {
    echartsView
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.$nextTick(() => {
          this.fetchData()
        })
      }
    }
  },
  data () {
    return {
      loading: false,
      options: {}
    }
  },
  methods: {
    fetchData () {
      this.loading = true
      setTimeout(() => {
        this.options = {
          title: {
            text: '总体情况',
            textAlign: 'center',
            top: '6%',
            left: '50%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['租赁补贴', '实物配租配售', '总户数'],
            top: '14%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '30%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: [
              '至2018年11月累计已实施保障户数（户）',
              '至2018年11月累计退出保障户数（户）',
              '至2018年11月正在实施保障户数（户）',
              '至2018年1-11月进入保障户数（户）',
              '至2018年1-11月退出保障户数（户）'
            ]
          },
          series: [
            {
              name: '租赁补贴',
              type: 'bar',
              data: [46898, 46898, 46898, 46898, 46898]
            },
            {
              name: '实物配租配售',
              type: 'bar',
              data: [97730, 97730, 97730, 97730, 97730]
            },
            {
              name: '总户数',
              type: 'bar',
              data: [144628, 144628, 144628, 144628, 144628]
            }
          ]
        }
        this.loading = false
      }, 1000)
    },
    hanldeAfterClose () {},
    close () {
      this.$emit('update:visible', false)
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleCancel () {
      this.close()
    }
  }
}
</script>
<style scoped>
</style>
